<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>演示：PHP+echarts读取地图数据</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" />
    </head>
    <body>
        <div class="head">
            <div class="head_inner clearfix">
                <ul id="nav">
                    <li><a href="http://www.sucaihuo.com">首 页</a></li>
                    <li><a href="http://www.sucaihuo.com/templates">网站模板</a></li>
                    <li><a href="http://www.sucaihuo.com/js">网页特效</a></li>
                    <li><a href="http://www.sucaihuo.com/php">PHP</a></li>
                    <li><a href="http://www.sucaihuo.com/site">精选网址</a></li>
                </ul>
                <a class="logo" href="http://www.sucaihuo.com"><img src="http://www.sucaihuo.com/Public/images/logo.jpg" alt="素材火logo" /></a>
            </div>
        </div>
        <div class="container">
            <div class="demo">
                <h2 class="title"><a href="http://www.sucaihuo.com/js/720.html">教程：PHP+echarts读取地图数据</a></h2>

                <div id="myChart" style="width:700px;height:560px"></div>
            </div>
        </div>
        <div class="foot">
            Powered by sucaihuo.com  本站皆为作者原创，转载请注明原文链接：<a href="http://www.sucaihuo.com" target="_blank">www.sucaihuo.com</a>
        </div>
        <script type="text/javascript" src="js/echarts.min.js"></script>
        <script type="text/javascript" src="http://libs.useso.com/js/jquery/1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/china.js"></script>
        <script type="text/javascript">
                    option = {
                        title: {
                            text: '2015年GDP统计数据',
                            subtext: '数据来源网络（单位：万亿元）',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c}万亿元"
                        },
                        visualMap: {
                            min: 0,
                            max: 10,
                            left: 'left',
                            top: 'bottom',
                            orient: 'horizontal',
                            text: ['高', '低'], // 文本，默认为数值文本
                            calculable: true  //是否启用值域漫游，即是否有拖拽用的手柄，以及用手柄调整选中范围。
                        },
                        toolbox: {
                        //工具栏
                            show: true,
                            orient: 'vertical', //垂直
                            left: 'right',
                            top: 'center',
                            feature: {
                                mark: {show: true},
                                saveAsImage: {show: true} //保存为图片
                            }
                        },
                        series: [
                            {
                                name: '2015年GDP',
                                type: 'map',
                                mapType: 'china',
                                roam: false, //是否开启鼠标缩放和平移
                                itemStyle: {
                                    normal: {label: {show: true}},
                                    emphasis: {label: {show: true}}
                                },
                                data: []
                            }
                        ]
                    };
                    var myChart = echarts.init(document.getElementById('myChart'));

                    myChart.showLoading();
                    myChart.setOption(option);

        // 异步加载数据
                    $.ajax({
                        type: "post",
                        async: false, //同步执行
                        url: "mapdata.php",
                        dataType: "json", //返回数据形式为json
                        data: {rnd: Math.random()},
                        success: function(result) {
                            console.log(result);
                            myChart.hideLoading();
                            myChart.setOption({
                                series: [{
                                        // 根据名字对应到相应的系列
                                        name: '2015年GDP',
                                        data: result
                                    }]
                            });
                        },
                        error: function(errorMsg) {
                            alert("请求数据失败!");
                        }
                    });
        </script>
    </body>
</html>




<!-- 以下是统计及其他信息，与演示无关，不必理会 -->

<p class="vad">
    <a href="http://www.sucaihuo.com/" target="_blank">sucaihuo.com</a>
    <a href="http://www.sucaihuo.com/php/720.html" target="_blank">说 明</a>
    <a href="http://www.sucaihuo.com/php/720.html" target="_blank">下 载</a>
</p>
<style type="text/css">
    .vad { margin: 120px 0 5px; font-family: Consolas,arial,宋体,sans-serif; text-align:center;}
    .vad a { display: inline-block; height: 36px; line-height: 36px; margin: 0 5px; padding: 0 50px; font-size: 14px; text-align:center; color:#eee; text-decoration: none; background-color: #222;}
    .vad a:hover { color: #fff; background-color: #000;}
    .thead { width: 728px; height: 90px; margin: 0 auto; border-bottom: 40px solid #fff;}
</style>
<div style="width:728px;margin:0 auto">
    <script type="text/javascript">
        /*700*90 创建于 2015-06-27*/
        var cpro_id = "u2176575";
    </script>
    <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>
</div>